<template>
    <div class='EditStr'>
        <div class="item" v-loading="loading">
            <el-input v-model="value" :disabled="loadingSave" :rows="10" type="textarea" placeholder="请输入内容" />
        </div>
        <div class="item">
            <el-button @click="screen_editor" size="small">大屏编辑</el-button>
            <el-button @click="refresh" :loading="loading" type="info" size="small" icon="el-icon-refresh-right">刷新</el-button>
            <el-button @click="save" :disabled="value == oldValue" :loading="loading || loadingSave" type="success" size="small" icon="el-icon-position">保存</el-button>
        </div>
    </div>
</template>

<script>
import { str_set, str_get } from '@/api/key/str';
import { defineComponent, reactive, toRefs } from 'vue';
import { mapGetters } from 'vuex'
import { ElNotification, ElMessageBox, ElMessage } from 'element-plus'
export default defineComponent({
    name: 'EditStr',
    components: {},
    setup(omprops, content) {
        // var t = omprops.props.value
        const state = reactive({
            loading: false,
            loadingSave: false,
            oldValue: '',
            value: '',
        })
        return toRefs(state)
    },
    props: [],
    computed: {
        ...mapGetters([
            'select_key',
            'key_type'
        ]),
    },
    watch: {
        // key变化
        select_key(n, o) {
            this.refresh()
        }
    },
    mounted() {
        this.refresh()
    },
    methods: {
        // 刷新
        refresh() {
             //主要判断没有正在加载(ing),切换key时，销毁不及时，会导致重复触发请求
            if (this.select_key == '' || this.key_type != 'string') {
                return
            }
            this.load_str()
        },

        // 加载数据
        load_str() {
            this.loading = true;
            str_get(this.select_key).then((res) => {
                this.oldValue = res.data
                this.value = res.data
            }).finally(() => {
                this.loading = false;
            })
        },

        save() {
            this.loadingSave = true
            str_set(this.select_key, this.value).then((res) => {
                ElNotification({
                    title: "保存成功",
                    message: `${this.oldValue} -> ${res.data.map.value}`,
                    type: 'success'
                })
                this.oldValue = res.data.map.value
                this.value = res.data.map.value
            }).finally(() => {
                this.loadingSave = false;
            })
        },
        // 删除
        deleteKey(item) {
            ElMessageBox({
                title: '警告',
                message: `确定要删除 key:${this.select_key} item:${item} 吗？这将不可以恢复`,
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                showCancelButton: true,
                type: 'error',
                confirmButtonClass: "el-button--danger",
                beforeClose: (action, instance, done) => {
                    if (action === 'confirm') {
                        instance.confirmButtonLoading = true
                        // set_srem(this.select_key, item).then((res) => {
                        //     done()
                        // }).finally(() => {
                        //     setTimeout(() => {
                        //         instance.confirmButtonLoading = false
                        //     }, 300)
                        // })
                    } else {
                        done()
                    }
                },
            }

            ).then(() => {
                ElNotification({
                    title: '删除成功',
                    message: `${item} 已被成功删除`,
                    type: 'success',
                })
            })
        },

        screen_editor() {
            ElMessage("功能开发中")
        }
    },
})
</script>

<style scoped lang="less">
.ConString {
    width: 100%;
}
.item {
    margin-top: 6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    label {
        display: block;
        width: 50px;
        text-align: left;
        font-size: 14px;
    }
    .input {
        flex: 1;
    }
}
</style>